<template>
  <div class="component header">
    <div class="h_left">
      <img alt="logo" class="hl_logo" :src="userDetail.titleImg || defaultSysInfo.logo"/>
      <span class="hl_sysname">{{ userDetail.sysName || defaultSysInfo.name }}</span>
    </div>
    <ul class="h_center">
      <li :class="['hc_menu', defaultIndex === i ? 'selected' : '']" v-for="(m, i) in topMenus" :key="i" @click="selectMenu(i)">
        <span>{{ m.meta.title }}</span>
      </li>
    </ul>
    <div class="h_right">
      <el-dropdown class="hr_dropdown" trigger="click">
        <el-button type="primary" class="hrd_button">
          个人中心
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item class="drop_menu" v-for="(dm, i) in dropMenus" :key="i" :tabindex="i" @click="selectDropMenu(dm.opt)">{{ dm.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useBasicStore from '@/store/basic'
import type { RouteRecordRaw } from 'vue-router'
import router from '@/router'

const defaultSysInfo = {
  logo: '/public/logo.png',
  name: '后台管理系统'
}

const store = useBasicStore()
const userDetail = store.userDetail

const dropMenus = [
  {
    name: '返回首页',
    opt: 'home'
  },  {
    name: '用户信息',
    opt: 'userInfo'
  },  {
    name: '修改密码',
    opt: 'changePwd'
  },  {
    name: '退出登录',
    opt: 'logout'
  }
]

interface Props {
  defaultIndex: number,
  topMenus: RouteRecordRaw[]
}

const props = withDefaults(defineProps<Props>(), {
  defaultIndex: 0,
  topMenus: () => []
})

let { topMenus, defaultIndex } = toRefs(props)

const emits = defineEmits<{ ( e: 'selectTopMenu', index: number): void }>()

const selectMenu = (index: number) => {
  emits('selectTopMenu', index)
}

const selectDropMenu = (opt: string) => {
  switch (opt) {
    case 'logout':
      store.deregisterUser()
      router.push({
        path: '/login'
      })
      break
    case 'home':
      router.push({
        path: '/home'
      })
      break
  }
}

onMounted(() => {
  // TODO
})

</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 60px;
  padding: 0 10px;
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
  .h_left {
    width: 300px;
    line-height: 60px;
    .hl_logo {
      height: 30px;
      aspect-ratio: 1 / 1;
      margin: 0 10px;
      vertical-align: middle;
      border-radius: 4px;
      cursor: pointer;
    }
    .hl_sysname {
      display: inline-block;
      min-width: 100px;
      font-size: 18px;
      cursor: pointer;
    }
  }
  .h_center {
    width: calc(100% - 400px);
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    .hc_menu {
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      cursor: pointer;
      font-size: 16px;
      z-index: 99;
      span {
        display: inline-block;
        line-height: 60px;
        height: 60px;
      }
    }
  }
  .h_right {
    width: 200px;
    text-align: center;
    .hr_dropdown {
      height: 58px;
      cursor: pointer;
      .hrd_button {
        font-size: 14px;
        height: 60px;
        border: 0;
        outline: 0;
        border-radius: 0;
      }
    }
  }
}
</style>
